<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>地图</title>
		
		<link rel="stylesheet" href="css/leaflet.css" />
		<link rel="stylesheet" href="layui/css/layui.css" />
		<link rel="stylesheet" href="css/mapui.css" />
		<link rel="stylesheet" href="css/layuix.css" />
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<div id="container"></div>
	</body>
	<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		layui.config({
			base: 'plugin/'
		}).use(['map','mapUI','jquery','layer'], function() {
			
			var L = layui.map,
				ui = layui.mapUI,
				$ =layui.jquery;
			
			/**
			 * 目前定义的有两个模式
			 * 
			 * 一个是编辑模式一个是预览模式
			 * 编辑模式下，我们可以定义资源，并做不同图层的分组
			 * 
			 * 例如，铁资源的的分布，支持用点标注，也支持用圈圈标注
			 * 
			 * //容器id
			 * edit
			 * 会去使用mapUrl来拉取模板信息
			 * view 
			 * 会去使用url来获取某个地图的信息
			 */
			ui.render({
				mode:'edit',
				container:$("#container"),
				url:'./json/mapData1.json',
				mapUrl:"./json/map.json"
			});

		});
	</script>
</html>
